.row{
    margin-left: -15px; 
    margin-right: -15px;
    &:before, &:after{content: ""; display: table;}
    &:after{clear: both;}
}

.make-grid(xs);
.make-grid-columns();

@media (min-width: @screen-sm-min){
    .make-grid(sm);  
}

@media (min-width: @screen-md-min){
    .make-grid(md);
}

@media (min-width: @screen-lg-min){    
    .make-grid(lg);
}

//
.make-grid(@class){
    .float-grid-columns(@class);
    .loop-grid-columns(@grid-columns, @class, width);
    .loop-grid-columns(@grid-columns, @class, pull);
    .loop-grid-columns(@grid-columns, @class, push);
    .loop-grid-columns(@grid-columns, @class, offset);
}
.loop-grid-columns(@index, @class, @type) when (@index >= 0){
    .calc-grid-column(@index, @class, @type);
    .loop-grid-columns((@index - 1), @class, @type);
}
.calc-grid-column(@index, @class, @type) when (@type = width) and(@index > 0){
    .col-@{class}-@{index}{
        width:  percentage((@index / @grid-columns));
    }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and(@index > 0){
    .col-@{class}-pull-@{index}{
        right:  percentage((@index / @grid-columns));
    }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and(@index = 0){
    .col-@{class}-pull-@{index}{
        right:  auto;
    }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and(@index > 0){
    .col-@{class}-push-@{index}{
        left:  percentage((@index / @grid-columns));
    }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and(@index = 0){
    .col-@{class}-push-@{index}{
        left:  auto;
    }
}
.calc-grid-column(@index, @class, @type) when (@type = offset) and(@index > 0){
    .col-@{class}-offset-@{index}{
        margin-left:  percentage((@index / @grid-columns));
    }
}

.float-grid-columns(@class){
    .col(@index){
        @item: ~".col-@{class}-@{index}";
        .col((@index + 1), @item);
    }
    .col(@index, @list) when (@index =< @grid-columns){
        @item: ~".col-@{class}-@{index}";
        .col((@index + 1), ~"@{list}, @{item}");
    }
    .col(@index, @list) when (@index > @grid-columns){
        @{list}{
            float: left;
        }
    }
    .col(1);
}

.make-grid-columns(){
    .col(@index){
        @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
        .col((@index + 1), @item);
    }
    .col(@index, @list) when (@index =< @grid-columns){
        @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
        .col((@index + 1), ~"@{list}, @{item}");
    }
    .col(@index, @list) when (@index > @grid-columns){
        @{list}{
            position: relative;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
        }
    }
    .col(1);
}
